<template>
  <div class="container">
      <div class="cate">
        <ul v-bind="{style:'width:'+ulwidth+'px'}">
          <li @click="getimgs(0)">全部</li>
          <li v-for="item in cate" @click="getimgs(item.id)">
            {{item.title}}
          </li>
        </ul>
      </div>
      <div id="imglist">
        <ul>
          <li v-for="item in list">
            <router-link v-bind="{to:'/photo/photoinfo/'+item.id}">
            <img v-lazy="item.img_url">
            <div id="desc">
              <h5 v-text="item.title" ></h5>
              <p v-text="item.zhaiyao"></p>
            </div>
            </router-link>
          </li>
        </ul>
		</div>
  </div>
</template>
<script>
import common from '../../kits/common.js'
import { Toast } from 'mint-ui'
import { Lazyload } from 'mint-ui'
export default {
  data(){
    return {
      ulwidth:320,
      cate: '',
      list: ''
    }
  },
  created(){
    this.getcate();
    this.getimgs();
  },
  methods: {
    getimgs(id){
      id = id || 0;
      var url = common.apidomain + '/api/getimages/' + id;
      this.$http.get(url).then(function(res){
        if(res.body.status != 0){
          Toast(res.body.message);
          return;
        }
        this.list = res.body.message;
      })
    },
    getcate(){
      var url = common.apidomain + '/api/getimgcategory';
      this.$http.get(url).then(function(res){
        if(res.body.status != 0){
          Toast(res.body.message);
          return;
        }
        this.cate = res.body.message;
        this.ulwidth = (this.cate.length + 1) * 64;
      });
    }
  }
}
</script>
<style scoped>
.cate{
  width: 100%;
	overflow-x: auto;
}
.cate ul{
  height: 40px;
  line-height: 40px;
  margin: 0px;
  padding: 0;
  overflow-x: auto;
}
.cate li{
  cursor: pointer;
  list-style: none;
  color:#0094ff;
  font-size: 14px;
  padding: 5px;
  float: left;
}
#imglist ul {
  padding-left: 0px;
}
#imglist li{
  list-style:none;
  position: relative ;
}
#imglist img{
  width:100%;
  height: 300px;
}
#desc{
		width: 100%;
		background-color: rgba(0,0,0,0.2);
		position: absolute;
		bottom: 2px;
		left: 0px;
	}

#desc h5{
	color: #ffffff;
	font-weight: bold;
}
#desc p{
	color:#fff;
}
image[lazy=loading] {
	width: 40px;
	height: 300px;
	margin: auto;
}
</style>
